<template>
  <div class="aside">
    <div class="draft-box">
      <h4>
        <span class="iconfont">&#xea9d;</span> 草 稿 箱 ({{
          this.$store.state.post.posts.length
        }})
      </h4>
      <div class="draft-list">
        <div
          class="draft-item"
          v-for="(data, index) in this.$store.state.post.posts"
          :key="index"
        >
          <div class="draft-post-title">{{ data.title }}</div>
          <el-row type="flex" class="row-bg" justify="space-between">
            <p class="date">
              {{ $moment(new Date()).format("YYYY-MM-DD") }}
            </p>
            <div class="operate">
              <span class="iconfont" @click="editTravel(index)">&#xe678;</span>
              <span class="iconfont" @click="delectTravel(index)"
                >&#xe603;</span
              >
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //编辑草稿游记
    editTravel(index) {
      //   console.log(this.$store.state.post.posts);
      this.$emit("showData", index);
    },
    // 删除草稿
    delectTravel(index) {
      this.$confirm("是否继续删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.$store.commit("post/deletePosts", index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="less" scoped>
.aside {
  width: 210px;
  .draft-box {
    h4 {
      font-weight: 400;
      font-size: 16px;
      padding: 10px;
      background-color: orange;
      color: #fff;
    }
    .draft-list {
      padding: 10px 0;
      box-shadow: 0px 1px 1px 0px #ccc;
      .draft-item {
        padding: 0 5px;
        .draft-post-title {
          font-size: 14px;
          &:hover {
            color: orange;
            text-decoration: underline;
            cursor: default;
          }
        }
        .row-bg {
          font-size: 14px;
          .date {
            color: #999;
          }
          .operate {
            span {
              font-size: 14px;
              margin: 0 3px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
